 const Routing = ()=>useRoutes({})

//  return <BrowserRouter>
//   <Routes>
//     <Route></Route>
//   </Routes>
//  </BrowserRouter>

 //useRoutes的原理，就是把对象以树的形式进行存放，同时根据URL，来匹配渲染对应的组件

 const usrRoutes = (routes)=>{
  let location = useLocation()
  let currentPath = location.pathname || '/'
  for(let i = 0;i<routes.length;i++){
    let {path,element} = routes[i]
    let match = currentPath.match(new RegExp(`^${path}`))
    if(match){
      return element
    }
  }
 }
const createRoutesFromChildren = (children)=>{
  let routes = []
  React.Children.forEach(children,(node)=>{
    let route = {
      path:node.props.path,
      element:node.props.element
    }
    if(node.props.children){
      route.children = createRoutesFromChildren(node.props.children)
    }
  })
}
 const Routes = ({childen})= >useRoutes={(createRoutesFromChildren(children))}